{% extends "base.html" %} {% block mainbody %}

<script src="/static/js/echarts.js"></script>
{#<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"></script>#}
<div class="container">
    <div class="row">
        <div class="col-md-12">

            <!--overview start-->
            <div class="row">
                <div class="col-md-12">
                    <h3 class="page-header"><i class="icon_images"></i> 图片检索 </h3>
                    <ol class="breadcrumb">
                        <li><i class="fa fa-home"></i><a href="\">Home</a></li>
                        <li><i class="icon_images"></i>图片检索</li>
                    </ol>
                </div>
            </div>

            <div class="row">
            <div class="col-md-3">

                <section class="panel panel-default">
                    <header class="panel-heading">
                        拍照上传 :
                    </header>
                    <div class="panel-body">
                        <form action="/decision" method="post">
                            {% csrf_token %}
                        <a href="#" class="thumbnail">
                        <img id="img_upload_show"  height="100%" width="100%">
                        </a>
                        <input name="img_base64" id="img_base64" class="form-control" style="display: none" > </input>
                        <input id="img_upload_file" type="file" onchange="handleSelected()"/>
                        <button type="submit" class="btn-primary btn-block"> Match! </button>
                        </form>
                    </div>

                </section>
                <section class="panel panel-default">
                    <header class="panel-heading">
                        其它匹配结果 :
                    </header>
                    <div class="panel-body">
                        {% autoescape off %}
                        {{ other_match }}
                        {% endautoescape %}



                    </div>
                </section>
            </div>
            <div class="col-md-9">
                <section class="panel panel-default">
                    <header class="panel-heading">
                         最优匹配结果：
                    </header>
                    <div class="panel-body">
                        {% autoescape off %}
                        {{ best_match }}
                        {% endautoescape %}
                    </div>
                </section>

                <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
                <div class="panel panel-default ">
                    <header class="panel-heading">
                        关系图 :
                    </header>
                    <div class = "panel-body ">
                        <div id="graph" style="width: 90%;height:450px;"></div>
                    </div>
                </div>
            </div>
            </div>

        </div>

    </div>
</div>

<script src="/static/js/jquery.min.js"></script>
<script type="text/javascript">
        //{entity2,rel}
        var entityRelation = [ {{ graph|safe }} ] ;

        var data = [] ;
        var links = [] ;
        if(entityRelation.length != 0){
            var node = {} ;
            //实体１
            node['name'] = '{{ best_match_title|safe }}';
            //alert(document.getElementById('user_text').value)
            node['draggable'] = true ;
            var id = 0;
            node['id'] = id.toString() ;
            data.push(node) ;

            //获取实体２，存储在data中，如果实体2已经存在于data中，则不push
            var maxDisPlayNode = 15 ;
            for( var i = 0 ;i < Math.min(maxDisPlayNode,entityRelation[0].length) ; i++ ){
                node = {} ;
                node['name'] = entityRelation[0][i]['entity2']['title'] ;
                node['draggable'] = true ;
                if('url' in entityRelation[0][i]['entity2']){
                    node['category'] = 1 ;
                }
                else{
                    node['category'] = 2 ;
                }
                id = i + 1
                node['id'] = id.toString();
                var flag = 1 ;
                relationTarget = id.toString() ;
                for(var j = 0 ; j<data.length ;j++){
                    if(data[j]['name'] === node['name']){
                        flag = 0 ;
                        relationTarget = data[j]['id']  ;
                        break ;
                    }
                }
                relation = {}
                relation['source'] = 0 ;
                relation['target'] = relationTarget ;
                relation['category'] = 0 ;

                if(flag === 1){
                    data.push(node) ;
                    relation['value'] = entityRelation[0][i]['rel']['type'] ;
                    relation['symbolSize'] = 10
                    links.push(relation) ;
                }
                else{
                    maxDisPlayNode += 1 ;
                    for(var j = 0; j<links.length ;j++){
                        if(links[j]['target'] === relationTarget){
                            links[j]['value'] = links[j]['value']+" | "+entityRelation[0][i]['rel']['type']
                            break ;
                        }
                    }

                }

            }

        }
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('graph'));
        option = {
            title: {
                text: ''
            },
            tooltip: {},
            animationDurationUpdate: 1500,
            animationEasingUpdate: 'quinticInOut',
            label: {
                normal: {
                    show: true,
                    textStyle: {
                        fontSize: 12
                    },
                }
            },
            legend: {
                x: "center",
                show: false
            },
            series: [

                {
                    type: 'graph',
                    layout: 'force',
                    symbolSize: 45,
                    focusNodeAdjacency: true,
                    roam: true,
                    edgeSymbol: ['none', 'arrow'],
                    categories: [{
                        name: '查询实体',
                        itemStyle: {
                            normal: {
                                color: "#009800",
                            }
                        }
                    }, {
                        name: 'HudongItem',
                        itemStyle: {
                            normal: {
                                color: "#4592FF",
                            }
                        }
                    }, {
                        name: 'NewNode',
                        itemStyle: {
                            normal: {
                                color: "#C71585",
                            }
                        }
                    }],
                    label: {
                        normal: {
                            show: true,
                            textStyle: {
                                fontSize: 12,
                            },
                        }
                    },
                    force: {
                        repulsion: 1000
                    },
                    edgeSymbolSize: [4, 50],
                    edgeLabel: {
                        normal: {
                            show: true,
                            textStyle: {
                                fontSize: 10
                            },
                            formatter: "{c}"
                        }
                    },
                    data: data,
                    links: links,
                    lineStyle: {
                        normal: {
                            opacity: 0.9,
                            width: 1.3,
                            curveness: 0,
                            color:"#262626"
                        }
                    }
                }
            ]
        };

// 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
</script>

    <!--图片检索js start-->
    <script type="text/javascript">
        function handleSelected(){
			/**得到FileList的第一个元素，也就是上传的图片**/
			var e = window.event || arguments[0];
     		let file = e.target.files[0];
     		console.log(file);
    		/**创建一个FileReader实例，用来读取文件**/
     		let reader = new FileReader();
    		/**成功读取之后将图片显示出来**/
	    	reader.onload = function(e){
	       		let image = document.getElementById('img_upload_show');
	       		image.src = e.target.result;
	       		image.onload = function (){
	       		    document.getElementById('img_base64').value = e.target.result;
	       			console.log(e.target.result);
	        		console.log('图片加载出来了...')
	       		}
	     	};
	     	reader.readAsDataURL(file);
	     }

    </script>
    <!--图片检索js end-->
{% endblock %}

